// 写完代码发现uni-app不支持自定义指令，炸裂
// 自定义指令用于修改元素背景，展示指定的等级背景
export const useLevel = (Vue) => {
  Vue.directive('level', {
    bind() {
      console.log("bind")
    },
    update(el, binding) {
      console.log("update")
      // 对应等等级id
      const levelId =  binding.value
      // 需要修改背景的位置
      const level = binding.arg
      setBackground(el, level, levelId)
    },
    inserted(el) {
      console.log("inserted")
    },
    componentUpdated(el, binding) {
      console.log("componentUpdated")
    }
  })
}

// 设置背景
function setBackground(el, level, levelId) {
  el.style.backgroundImage = 'url('+ getPath(level) + getLevelName(levelId) + '.png)'
}

/**
 * 根据需要修改的背景返回对应的背景图片名称
 * @param level 需要修改对应级的背景
 * @returns {string} 返回背景图片相对路径
 */
export function getPath(level) {
  const prefix = 'https://www.dingxians.cn/upload/user_static/'
  let path
  switch (level) {
    // 整个item背景
    case 'item':
      path = 'box/bg-box-'
    break
    // 图片背景
    case 'img':
      path = 'box/bg-goods-image-'
      break
    // 图标背景
    case 'icon':
      path = 'box/level-icon-'
      break
    // 抽赏历史item背景
    case 'history':
      path = 'index/bg-item-'
      break
    // 奖品卡片背景
    case 'prize':
      path = 'index/bg-draw-'
      break
    case 'mask':
      path = 'index/mask-'
      break
    default:
      // 默认整个item背景
      path = 'box/bg-box-'
      break
  }
  return prefix + path
}

/**
 * 根据等级id查询对应的等级名
 * @param levelId 等级id
 * @returns {string} 等级名称
 */
export function getLevelName(levelId) {
  switch (levelId) {
    case 1:
      return 'normal';
    case 2:
      return 'rare';
    case 3:
      return 'epic';
    case 4:
      return 'legend';
    // 默认将返回普通的背景
    default:
      return 'normal';
  }
}